<template>
  <div id="horizontalScroll">
    <!-- 水平滑动 -->
    <scroll
      class="menuTitleWrapper"
      ref="menuTitleWrapper"
      :probeType="3"
      :listenScroll="true"
      :scrollX="true"
      :data="menuTitlesArray"
    >
      <ul ref="menuTitleUlContent">
        <li
          class="menuTitles"
          :class="{selected:currentSubTitle === index}"
          v-for="(item,index) in menuTitlesArray"
          :key="item.id"
          ref="menuTitles"
          @click="menuTitleClick(index)"
        >
          {{item.name}}
        </li>
      </ul>
    </scroll>
  </div>
</template>

<script type="text/javascript">
// import Scroll from '@/components/common/scroll/Scroll'
import setSlideWidth from '@/assets/js/setSlideWidth'
export default {
  name: 'VipMenuTitleScroll',
  props: {
    menuTitlesArray: {
      type: Array,
      default: () => []
    }
  },
  mounted () {
    this.$nextTick(() => {
      this._initHorizontalScroll()
    })
  },
  data () {
    return {
      currentSubTitle: 0,
      menuDown: true
    }
  },
  watch: {
    menuTitlesArray () {
      this.$nextTick(() => {
        this._initHorizontalScroll()
      })
    }
  },
  // components: {
  //   Scroll
  // },
  methods: {
    _initHorizontalScroll () {
      let ulNode = this.$refs.menuTitleUlContent
      setSlideWidth(ulNode)
    },
    // 上下箭头切换
    menuClick () {
      this.menuDown = !this.menuDown
    },
    // 点击标题
    menuTitleClick (index) {
      // 让横向滑动到合适位置
      this.currentSubTitle = index
      let el = this.$refs.menuTitles[index]
      this.$refs.menuTitleWrapper.scrollToElement(el, 500)
      // 给父组件MyVip传递事件并将index值传递过去
      this.$emit('menutitle-click', index)
    }
  }
}
</script>

<style lang="scss" scoped>
#horizontalScroll {
  .menuTitleWrapper {
    position: relative;
    @include setWH(100%, px2rem(49));
    display: inline-block;
    white-space: nowrap;
    border-bottom: solid px2rem(0.2) #e8e9e8;
    overflow: hidden;
    background-color: $text-color-white;
    .menuTitles {
      display: inline-block;
      font-size: px2rem(13);
      padding: px2rem(17.5);
    }
    .selected {
      color: #3cb963;
    }
    .showMenu {
      position: absolute;
      top: px2rem(-2);
      right: 0;
      @include setWH(10%, px2rem(49));
      padding-right: px2rem(9);
      line-height: px2rem(49);
      background-color: $text-color-white;
      .menuIcon {
        @include setWH(100%, px2rem(49));
      }
    }
  }
}
</style>
